// 创建外壳组件 App
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List"
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
    // 初始化状态
    state = {
        todos:[
            {id:'001',title:'喝酒',done:true},
            {id:'002',title:'抽烟',done:false},
            {id:'003',title:'烫头',done:true},
        ]
    }
    // 添加
    addTodo = (name)=>{
        const {todos} = this.state
        let obj = {id:Date.now(),title:name,done:false}
        let newTodo = [...todos,obj]
        this.setState({todos:newTodo})  // 更新状态

        console.log(name);
    }
    // 删除
    delTodo = (id)=>{
        const {todos} = this.state
        const newTods = todos.filter(todoObj=> todoObj.id !== id)
        this.setState({todos:newTods})
    }

    // 更改todo对象
    updateTodo =(id,done)=>{
        const {todos} = this.state
        const newTods = todos.map((todoObj)=>{
            if(todoObj.id === id) return {...todoObj,done}
            else return todoObj
        })

        this.setState({todos:newTods})
    }

    // 全选
    allTodo = (flag)=>{
        const {todos} = this.state

        const newTodo = todos.map(todoObj=>{
            return {...todoObj,done:flag}
        })
        this.setState({todos:newTodo})
    }

    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}></Header>
                    <List todos={todos} updateTodo={this.updateTodo} delTodo={this.delTodo}></List>
                    <Footer  todos={todos} allTodo={this.allTodo}></Footer>
                </div>
            </div>
        )
    }
}